<template>
  <div class="food" ref="homePage">
    <div class="bj">
      <van-nav-bar title="美食" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 82px;"></div>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img width="100%" height="100%" :src="image.ImgSrc" />
        <div class="wenzi">
          <div style="background: #000000;width: 100%;height: 100%;position: absolute;opacity: 0.6;"></div>
          <span style="padding: 0 10px;font-size: 14px;">{{image.Title}}</span>
        </div>
      </van-swipe-item>
    </van-swipe>
    <div v-show="datalist.length == 0"  class="wudingdan" >
        <van-icon name="description"/>
        <p>亲,暂无相关数据哦</p>
    </div>
    <van-list v-show="datalist.length != 0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="ShopList">
      <div v-for="(itme,index) in datalist" :key="index" class="food_content" @click="foodDetails(itme.shpSN,itme.resSN)">
        <div class="system_img"><img :src="itme.Cover"></div>
        <div class="system_content">
          <p class="theme">{{itme.Name}}</p>
          <div class="minute">
            <span class="minute_minute">{{itme.Score}}分</span>
            <span class="minute_price">￥{{itme.PerCost}}/人</span>
          </div>
          <div class="tired">
            <div>
              <van-tag class="title" v-for="(data,index) in itme.Tags" :key='index' color="#46d0ca" plain style="border: 1px solid;margin-right: 5px;">{{data}}</van-tag>
              <!-- <van-tag color="#46d0ca" plain style="border: 1px solid;">地方菜</van-tag> -->
            </div>
            <span>距离{{itme.Distance}}米</span>
          </div>
        </div>
      </div>
    </van-list>
    <van-dropdown-menu style="position: fixed;width: 100%;top: 46px;z-index: 999;" active-color="#46d0ca">
      <div style="width: 1px;height: 20px;border: 1px solid rgb(225, 225, 225);position: absolute;left: 51%;top: 10px;"></div>
      <van-dropdown-item v-model="value1" :options="option1" @change="changeleft" />
      <van-dropdown-item v-model="value2" :options="option2" @change="changeright" />
    </van-dropdown-menu>
  </div>
</template>

<script>
  // import Swiper from 'swiper';
  // import 'swiper/dist/css/swiper.min.css';
  import {
    ShopList,
    publicad
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        images: [
          // 'https://resource.sz-trip.com/uploads/20180612/ca83b168e92ea2751a6689e38608eb8a.jpg',
          // 'https://resource.sz-trip.com/wximg/Nighttour/Nighttour001.jpg',
          // 'https://resource.sz-trip.com/uploads/20191022/122de6bfc4afcd434392e9e5d50f4824.jpg'
        ],
        datalist: [],
        jinweilng: localStorage.getItem('Jingweilng'), //取经纬度
        jinweilat: localStorage.getItem('Jingweilat'), //取经纬度
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        totalPage: 0,
        pageNumber: 0, //自定义一个页数变量
        value1: 1,
        value2: 5,
        option1: [{
            text: '推荐排序',
            value: 1
          },
          {
            text: '离我最近',
            value: 2
          },

          {
            text: '评分最高',
            value: 3
          },

        ],
        option2: [{
            text: '默认排序',
            value: 5
          },
          {
            text: '地方菜',
            value: 0
          },
          {
            text: '火锅',
            value: 1
          },
          {
            text: '粤菜',
            value: 2
          },
          {
            text: '湘菜',
            value: 3
          },
          {
            text: '川菜',
            value: 4
          },
        ]
      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.publicad();
      this.ShopList();
      // console.log(this.jinweilng);
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      foodDetails(shpSN,resSN) {
        this.$router.push({
          path: "/Food/foodDetails",
          query:{
            shpSN:shpSN,
            resSN:resSN,
          }
        })
      },
      ShopList() {
        let data = {
          "PageNo": this.pageNumber+1, //页码
          "Lng": this.jinweilng, //经纬度
          "Lat": this.jinweilat,
          "Type":2,
          "SortType": this.value1,
          // "Tags":this.value2,
        }
        ShopList(data).then(res => {//请求美食列表

          this.totalPage = res.PageCount
          if (res.List.length > 0) {
            this.datalist = this.datalist.concat(res.List);
          } else {
            this.datalist = res.List
          }
          console.log(res)
          // console.log(this.datalist)
          this.loading = false;
          this.pageNumber++;
          if (this.pageNumber >= this.totalPage) {
            this.finished = true;
          }
        })
      },
      publicad(){
        let data = {
           Key:"food-index-foucs",
        }
        publicad(data).then(res=>{
          // console.log(res)
          this.images = res.Data
        })
      },
      changeleft(value) {
        this.datalist = []
        this.pageNumber = 0;
        this.ShopList();
        this.$forceUpdate();
      },
      changeright(value) {
        console.log(1)
        this.datalist = []
        this.pageNumber = 0;
        this.ShopList();
        this.$forceUpdate();
      },
    }
  }
</script>

<style lang="scss">
  .food {
    background: white;

    // color: #5c5c5c;
    .bj {
      .van-icon {
        color: white !important;

      }
    }

    .van-nav-bar {
      z-index: 99 !important;

      .van-nav-bar__left {
        .van-icon {
          color: #46d0ca;
          font-size: 18px;
        }
      }

      .van-nav-bar__title {
        color: #000000;
      }
    }

    .van-swipe {
      width: 100%;
      height: 244px;
      z-index: 9;

      .wenzi {

        position: relative;
        top: -46px;
        height: 40px;
        color: white;
        display: flex;
        align-items: center;
      }

      span {
        position: relative;
      }
    }

    .food_tet {
      padding: 13px;
      font-size: 18px;
    }


    .food_content {
      width: 100%;
      height: 130px;
      padding: 10px;
      display: flex;

      .system_img {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        img {
          width: 100%;
        }
      }
      .system_content {
        width: 70%;

        .theme {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #000000;
          padding: 2px 10px;
          font-size: 18px;
        }

        .minute {
          font-weight: 100;
          padding: 10px;

          .minute_minute {
            font-size: 20px;
            color: #46d0ca;
            // padding: 10px;
          }
        }

        .tired {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;

          .title {
            .van-tag {
              margin: 2px;
            }
          }
        }
      }
    }
  }
</style>
